<template>
  <div>
    <div >
      <el-breadcrumb separator="/">
        <el-breadcrumb-item>系统管理</el-breadcrumb-item>
        <el-breadcrumb-item>角色管理</el-breadcrumb-item>
      </el-breadcrumb>
    </div>
    <div style="float: left;margin-top: 8px;margin-bottom: 8px">
      <el-button type="primary" @click="_add">添加</el-button>
    </div>

    <div style="margin-top: 20px">
      <el-table
        :data="getPage"
        border
        height="500"
        style="width: 100%">
        <el-table-column v-for="item in columnName" :key="item.id" :label="item.label" >
          <template slot-scope="scope">
            <span>{{scope.row[item.prop]}}</span>
          </template>
        </el-table-column>
        <el-table-column
          fixed="right"
          label="操作"
          width="100">
          <template slot-scope="scope">
            <el-button @click="_bindUser(scope.row)" type="text" size="small">用户</el-button>
            <el-button type="text" @click="_edit(scope.row)"  size="small">编辑</el-button>
          </template>
        </el-table-column>
      </el-table>

    </div>
  </div>
</template>

<script>
    export default {
        name: "ToolCode",
      data(){
          return{
            getPage:[],
            columnName:[
              {prop:"roleName",label:"角色名称",width:"120",fixed:true},
              {prop:"parentName",label:"上级菜单",width:"120"},
            ],


        }
      }
    }
</script>

<style scoped>

</style>
